<template>
    <div class="main-box">
        <div class="table-box">
            <ProTable ref="proTableRef" title="列表" :columns="columns" :request-api="getTableList" :init-param="initParam">
                <!-- 表格 header 按钮 -->
                <!-- <template #tableHeader="scope"> -->
                <template #tableHeader>
                    <el-button v-blur type="primary" icon="CirclePlus" @click="addOpt" v-auth="'printerAdd'">新增{{ mainTitle }}</el-button>
                    <!-- <el-button v-blur type="primary" icon="CirclePlus" @click="addOpt" :disabled="!scope.isSelected">批量关联机器</el-button> -->
                </template>

                <!-- 表格操作 -->
                <template #operation="scope">
                    <!-- <el-button v-blur type="primary" link icon="EditPen" @click="editOpt(scope.row)">关联机器</el-button> -->
                    <el-button v-blur type="primary" link icon="EditPen" @click="editOpt(scope.row)" v-auth="'printerModify'">编辑</el-button>

                    <el-popconfirm :title="`确认要删除该${mainTitle}?`" @confirm="deleteOpt(scope.row.id, 'one')">
                        <template #reference>
                            <el-button v-blur type="primary" link icon="Delete" v-auth="'printerDelete'">删除</el-button>
                        </template>
                    </el-popconfirm>
                    <!-- <el-popconfirm :title="`确定要${statusText(scope.row.status)}`" @confirm="changeStatus(scope.row)">
            <template #reference>
              <el-button v-blur type="primary" link icon="Refresh">{{ statusText(scope.row.status) }}</el-button>
            </template>
          </el-popconfirm> -->
                </template>
            </ProTable>
        </div>
        <AddOrEditDialog ref="addOrEditDialogRef" @dialogClosed="dialogClosed" :main-title="mainTitle"></AddOrEditDialog>
        <DetailDialog ref="DetailDialogRef" @dialogClosed="dialogClosed"></DetailDialog>
    </div>
</template>

<script lang="jsx" setup name="printer">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'

// import dayjs from 'dayjs'
import AddOrEditDialog from './components/AddOrEditDialog.vue'
import DetailDialog from './components/DetailDialog.vue'

import { showReqError } from '@/hooks/useError'

import { useOrgStore } from '@/store/modules/org'

import { http } from '@/api'

const orgStore = useOrgStore()

// 弹框的元素
const addOrEditDialogRef = ref()
const DetailDialogRef = ref()
// 主要文字，多处显示
const mainTitle = '打印机'
/**
 * 新增
 */
const addOpt = () => {
    addOrEditDialogRef.value.show()
}
/**
 *  编辑
 */
const editOpt = (row) => {
    addOrEditDialogRef.value.show(row)
}
/**
 *  删除
 */
const deleteOpt = async (id) => {
    const params = { id: [id] }
    try {
        let res = await http('printerDelete', params)
        if (res.isError) return showReqError(res)
        ElMessage.success('删除成功')
        proTableRef.value?.getTableList()
    } catch (error) {
        console.log(error)
    }
}
// const statusText = computed(() => (status) => status === 1 ? '停用' : '启用')
/**
 * 修改停用状态
 * @param {Object} row 操作行的数据
 */
// const changeStatus = async (row) => {
//   try {
//     const params = {
//       id: row.id,
//       status: row.status === 1 ? -1 : 1
//     }
//     let res = await http('printerModifyStatus', params)
//     if (res.isError) return showReqError(res)
//     ElMessage.success('操作成功')
//     proTableRef.value?.getTableList()
//   } catch (error) {
//     console.log(error)
//   }
// }
/**
 * ProTable 相关
 *  proTableRef 操作元素
 *  initParam 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
 *  getTableList 获取列表
 *    如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
 *    默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
 *  columns 表格配置项
 */
const proTableRef = ref()
const initParam = reactive({})

const getTableList = (params) => {
    let newParams = JSON.parse(JSON.stringify(params))
    return http('printerFindByPage', newParams)
}

const columns = [
    { type: 'index', fixed: 'left', label: '序号', prop: 'expend', width: 80 },
    /* {
    prop: 'storeId',
    label: '归属店铺',
    render: (scope) => <span>{scope.row.storeName || '--'}</span>,
    enum: () =>
      http('findStoreTreeByOrgId', {
        showBusiness: 1,
        relType: 1 // 1 直属店铺  2 合作店铺
      }),
    fieldNames: { label: 'name', value: 'id' },
    search: {
      isHide: orgStore.isStore,
      el: 'cascader',
      props: {
        props: {
          label: 'name',
          emitPath: false,
          value: 'id'
        },
        showAllLevels: false,
        placeholder: '请选择'
      }
    }
  }, */
    {
        prop: 'storeName',
        label: '店铺',
        render: (scope) => <span>{scope.row.storeName || '--'}</span>
    },
    {
        prop: 'storeId',
        label: '店铺',
        isShow: false,
        enum: () =>
            http('findStoreTreeByOrgId', {
                showBusiness: 1,
                relType: 1 // 1 直属店铺  2 合作店铺
            }),
        fieldNames: { label: 'name', value: 'id' },
        search: {
            isHide: orgStore.isStore,
            el: 'cascader',
            props: {
                props: {
                    label: 'name',
                    emitPath: false,
                    value: 'id'
                },
                showAllLevels: false,
                placeholder: '请选择'
            }
        }
    },
    {
        prop: 'customPrinterName',
        label: '打印机名',
        // render: (scope) => <span>{scope.row.customPrinterName || '--'}</span>,
        render: (scope) => (
            <el-button link type="primary" onClick={() => DetailDialogRef.value.show(scope.row)}>
                {scope.row.customPrinterName || '--'}
            </el-button>
        ),
        search: {
            el: 'input',
            props: { placeholder: '请输入' }
        }
    },
    {
        prop: 'receiptType',
        label: '打印用途',
        render: (scope) => {
            switch (scope.row.receiptType) {
                case 0:
                    return '前台打印'
                case 1:
                    return '后厨打印'
                case 2:
                    return '传菜打印'
                case 3:
                    return '外卖打印'
                case 4:
                    return '小程序打印'
                default:
                    return '其他类型'
            }
        },
        enum: [
            {
                label: '前台打印',
                value: '0'
            },
            {
                label: '后厨打印',
                value: '1'
            },
            {
                label: '传菜打印',
                value: '2'
            },
            {
                label: '外卖打印',
                value: '3'
            },
            {
                label: '小程序打印',
                value: '4'
            }
        ],
        search: {
            el: 'select',
            props: {
                placeholder: '请选择'
            }
        }
    },
    {
        prop: 'type',
        label: '端口类型',
        render: (scope) => {
            switch (scope.row.type) {
                case 0:
                    return 'USB'
                case 1:
                    return '网口'
                case 2:
                    return '串口'
                case 3:
                    return '蓝牙'
                case 4:
                    return '驱动'
                case 5:
                    return '并口'
                case 6:
                    return '其他类型'
                case 7:
                    return '云打印'
                default:
                    return '其他类型'
            }
        }
    },
    {
        prop: 'sizeType',
        label: '纸张大小',
        render: (scope) => {
            switch (scope.row.sizeType) {
                case 0:
                    return '58mm'
                case 1:
                    return '80mm'
                case 2:
                    return '35*25mm'
                case 3:
                    return '40*30mm'
                default:
                    return '其他类型'
            }
        }
    },
    {
        prop: 'status',
        minWidth: 110,
        label: '状态',
        render: (scope) => {
            if (scope.row.status === 1) {
                return <span>已启用</span>
            }

            return <span class="color-error">已停用</span>
        },
        enum: [
            { label: '已启用', value: 1 },
            { label: '已停用', value: -1 }
        ],
        search: {
            el: 'select',
            props: {
                placeholder: '请选择'
            }
        }
    },
    // { prop: 'sequence', label: '关联机器' },
    { prop: 'operation', label: '操作' }
]
/**
 * 新增编辑等弹框关闭，刷新列表
 */
const dialogClosed = () => {
    proTableRef.value.getTableList()
}
</script>
<style lang="scss" scoped></style>
